<route lang="yaml">
meta:
enabled: false
</route>

<script setup lang="ts">
import apiPlaInfConf from '@/api/modules/plaInfConf'
import { ElMessage, ElMessageBox } from 'element-plus'
import { watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

defineOptions({
  name: 'PagesPlaInfConfList',
})

const { pagination, getParams, onSizeChange, onCurrentChange } = usePagination()

const router = useRouter()
const tableAutoHeight = ref(false)
const loading = ref(false)
const dataList = ref([])
const route = useRoute()
interface SysPlaInfConf {
  id: number
  information: string
  informationValue: string
  informationEn: string
  informationDescription: string
}
// 监听路由变化并刷新数据
watch(
  () => route.query.timestamp,
  () => {
    if (route.name === 'PagesPlaInfConfList') {
      getDataList()
    }
  },
)

onMounted(() => {
  getDataList()
})

// 搜索条件
const searchDefault = {
  information: '',
  informationValue: '',
  informationEn: '',
  informationDescription: '',
}
const search = ref({ ...searchDefault })

function searchReset() {
  Object.assign(search.value, searchDefault)
}

// 获取数据列表
function getDataList() {
  loading.value = true
  const params = {
    information: search.value.information,
    informationValue: search.value.informationValue,
    informationEn: search.value.informationEn,
    informationDescription: search.value.informationDescription,
    ...(getParams()),
  }
  apiPlaInfConf.list(params).then((res: any) => {
    console.log('res=', res)
    loading.value = false
    dataList.value = res.rows || []
    pagination.value.total = res.total || 0 // 更新 total 到分页组件
  }).catch(() => {
    dataList.value = []
    pagination.value.total = 0
  })
}
// 新增操作
function onCreate(row?: SysPlaInfConf) {
  if (!row) {
    router.push({
      name: 'plaInfConfCreate',
    })
    return
  }
  router.push({
    name: 'plaInfConfCreate',
    query: {
      id: row.id,
    },
  })
}

// 编辑操作
function onEdit(row: any) {
  router.push({
    name: 'plaInfConfEdit',
    params: {
      id: row.id,
    },
  })
}

// 删除操作
function onDel(row: any) {
  ElMessageBox.confirm(`确认删除「${row.information}」吗？`, '确认信息').then(() => {
    apiPlaInfConf.delete(Number(row.id)).then((res: any) => {
      if (res.code === 200) {
        getDataList()
        ElMessage.success({
          message: '删除成功',
        })
      }
    })
  }).catch(() => {})
}

// 分页切换
function sizeChange(size: number) {
  onSizeChange(size).then(() => getDataList())
}

function currentChange(page = 1) {
  onCurrentChange(page).then(() => getDataList())
}
</script>

<template>
  <div :class="{ 'absolute-container': tableAutoHeight }">
    <FaPageHeader title="平台信息配置" class="mb-0" />
    <FaPageMain :class="{ 'flex-1 overflow-auto': tableAutoHeight }" :main-class="{ 'flex-1 flex flex-col overflow-auto': tableAutoHeight }">
      <FaSearchBar :show-toggle="false">
        <ElForm :model="search" size="default" label-width="100px" inline-message inline class="search-form">
          <ElFormItem label="信息字段">
            <ElInput v-model="search.information" placeholder="请输入信息字段" clearable @keydown.enter="currentChange()" @clear="currentChange()" />
          </ElFormItem>
          <ElFormItem>
            <ElButton @click="searchReset(); currentChange()">
              重置
            </ElButton>
            <ElButton type="primary" @click="currentChange()">
              <template #icon>
                <FaIcon name="i-ep:search" />
              </template>
              筛选
            </ElButton>
          </ElFormItem>
        </ElForm>
      </FaSearchBar>
      <ElDivider border-style="dashed" />
      <FaPageMain :class="{ 'flex-1 overflow-auto': tableAutoHeight }" :main-class="{ 'flex-1 flex flex-col overflow-auto': tableAutoHeight }">
        <ElSpace>
          <ElButton type="primary" size="default" @click="onCreate()">
            <template #icon>
              <FaIcon name="i-ep:plus" />
            </template>
            新增配置
          </ElButton>
        </ElSpace>
        <ElTable v-loading="loading" class="mt-4" :data="dataList" row-key="id" stripe highlight-current-row default-expand-all border height="100%">
          <ElTableColumn prop="information" label="信息字段" show-overflow-tooltip />
          <ElTableColumn prop="informationValue" label="信息值" show-overflow-tooltip />
          <ElTableColumn prop="informationEn" label="信息英文值" show-overflow-tooltip />
          <ElTableColumn prop="informationDescription" label="信息描述" show-overflow-tooltip />
          <ElTableColumn label="操作" width="200" align="center" fixed="right">
            <template #default="scope">
              <ElSpace>
                <ElButton v-auth="'system:SysPlaInfConf:edit'" type="primary" size="small" plain @click="onEdit(scope.row)">
                  编辑
                </ElButton>
                <ElButton v-auth="'system:SysPlaInfConf:del'" type="primary" size="small" plain @click="onDel(scope.row)">
                  删除
                </ElButton>
              </ElSpace>
            </template>
          </ElTableColumn>
        </ElTable>
        <ElPagination style="margin-top: 20px;" :current-page="pagination.page" :total="pagination.total" :page-size="pagination.size" :page-sizes="pagination.sizes" :layout="pagination.layout" :hide-on-single-page="false" class="pagination" background @current-change="currentChange" @size-change="sizeChange" />
      </FaPageMain>
    </FaPageMain>
  </div>
</template>

<style scoped>
.absolute-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
</style>
